<!--使用挂载-->
<template>
    <div class="toast" v-show="isShow">
        <span>{{message}}</span>
    </div>
</template>

<script>
    export default {
        name: "Toast",
        data(){
          return {
              message:'',
              isShow:false
          }
        },
        methods:{
            show(message,time=1500){
                this.message = message
                this.isShow = true
                setTimeout(()=>{
                    this.message = ''
                    this.isShow = false
                },time)
            }
        }
    }
</script>

<style scoped>
  .toast{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 99;
    padding: 8px 10px;
    color: white;
    background: rgba(0,0,0,0.75)	;
  }
</style>
